<template>
   <el-menu :router="true">
      <el-sub-menu v-for="item in rights" :key="item._id" :index="item._id">
            <template #title>
                <el-icon>
                    <component :is="item.icon"></component>
                </el-icon>
                <span>{{ item.title}}</span>
            </template>
            <el-menu-item v-for="subItem in item.children" :key="subItem._id" :index="subItem.path">
                <template #title>
                <span>{{ subItem.title}}</span>
            </template>
            </el-menu-item>
      </el-sub-menu>
   </el-menu>
</template>

<script lang='ts' setup>
import api from '../api'
import {onMounted,ref} from 'vue'
import {AuthType} from '../types/users'
import dynicRoute from '../utils/dynicRoute'
const rights=ref<Array<AuthType>>([])
const getAuthMenu=async()=>{
    const result=await api.users.getAuthMenus()
    console.log(result.data.data);
    rights.value=result.data.data
    dynicRoute()
}
onMounted(()=>{
    getAuthMenu()
})
</script>

<style lang='scss' scoped>
</style>